<template>
  <span>
    <div class="inAndOut-box" @click="dialogVisible = true">
      <div class="subtitle-short inAndOut-titleSize">基金收支情况</div>
      <div class="inAndOut-icon">
        <div class="inAndOut-icon-item" v-for="(item,index) in tableData.fund" :key="index">
          <div class="inAndOut-icon-img" :style="{background: 'url(' + item.img + ')'}"/>
          <div class="inAndOut-icon-word">
            <div class="inAndOut-icon-text1">{{ item.text }}</div>
            <div class="inAndOut-icon-text2">{{ item.data }}<span class="inAndOut-icon-text3">百万</span></div>
          </div>
        </div>
      </div>
      <div id="table_fund_inAndOut" class="inAndOut-tableSize"/>
    </div>
    <!--  子屏  -->
    <subscreen_fund :dialogVisible="dialogVisible" @closeDialog="closeDialog"/>
  </span>
</template>

<script>
import echarts from "_echarts@4.9.0@echarts";
import subscreen_fund from "./subscreen_fund";
import axios from "_axios@0.25.0@axios";
import api from "@/api/gs";

export default {
  name: "table_fund_inAndOut",
  components: {subscreen_fund},
  data() {
    return {
      // 子屏显示标记
      dialogVisible: false,
      // 数据源
      tableData: {
        month: [], // 数据月份
        fundIn: [], // 当月基金收入
        fundOut: [], // 当月基金支出
        fundInTotal: 0, // 基金总收入
        fundOutTotal: 0, // 基金总支出
        fund: [
          {
            text: '基金总收入',
            data: 0,
            img: require('../assets/data_left_1.png')
          },
          {
            text: '基金总支出',
            data: 0,
            img: require('../assets/data_left_2.png')
          }
        ],
      }
    }
  },
  mounted() {
    this.getFund();
  },
  methods: {
    tableInit_fund_inAndOut() {
      const myChart = echarts.init(document.getElementById("table_fund_inAndOut"))
      const option = {
        grid: {
          top: '20%',
          right: '10%',
          bottom: '15%',
          left: '7%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          right: '10%',
          textStyle: {
            color: '#fff'
          },
          data: ['基金收入', '基金支出']
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
            data: this.tableData.month
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '百万元',
            min: 0,
            max: 40,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
                formatter: '{value} '
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#48D8CF'
                }, {
                  offset: 1,
                  color: '#4691D3'
                }]),
              }
            },
            data: this.tableData.fundIn
          },
          {
            name: '基金支出',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#EEBF47'
              }
            },
            data: this.tableData.fundOut
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 关闭子屏的回调
    closeDialog() {
      this.dialogVisible = false;
    },
    // 获取基金收支数据
    getFund() {
      let param = {};
      param.areaCode = '330784';
      param.startYear = '202107';
      param.endYear = '202112';
      param.typeFlag = 'M';

      axios.post(api.getFund, param).then(res => {
        const result = res.data.result;

        let month = ''; // 月份
        let date = ''; // 数据年月
        for (const item of result) {
          date = item.aae001;
          month = date.slice(-2) + '月';
          if (date.slice(-2, -1) == '0') {
            month = date.slice(-1) + '月';
          }

          let fundIn = (item.income / 1000000).toFixed(2); // 单位转为百万元，小数点后保留2位(四舍五入)
          let fundOut = (item.outcome / 1000000).toFixed(2); // 单位转为百万元，小数点后保留2位(四舍五入)
          this.tableData.month[this.tableData.month.length] = month;
          this.tableData.fundIn[this.tableData.fundIn.length] = fundIn;
          this.tableData.fundOut[this.tableData.fundOut.length] = fundOut;
          this.tableData.fund[0].data +=  parseFloat(fundIn);
          this.tableData.fund[1].data += parseFloat(fundOut);
        }

        this.tableInit_fund_inAndOut();
      }).catch(err => {
        console.log(err)
      });
    },
  }
}
</script>

<style scoped>
.inAndOut-box {
  height: 37%;
  width: 100%;
}

.inAndOut-titleSize {
  height: 14%;
  line-height: 170%;
}

.inAndOut-icon {
  height: 20%;
  width: 94%;
  margin: 1% 6%;
}

.inAndOut-icon-item {
  float: left;
  height: 100%;
  width: 35%;
  margin: 0 3%;
}

.inAndOut-icon-img {
  float: left;
  height: 75%;
  width: 30%;
  margin-top: 5%;
  overflow: hidden;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.inAndOut-icon-word {
  display: inline-block;
  float: left;
  width: 65%;
  height: 100%;
  color: #fff;
}

.inAndOut-icon-text1 {
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  margin-left: 6%;
  margin-top: 5%;
  color: white;
}

.inAndOut-icon-text2 {
  display: inline-block;
  float: left;
  width: 95%;
  height: 60%;
  font-family: LCD2;
  font-size: 1.6rem;
  text-align: left;
  margin-left: 5%;
}

.inAndOut-icon-text3 {
  display: inline-block;
  font-size: .8rem;
  margin-top: 5.8%;
}

.inAndOut-tableSize {
  width: 110%;
  height: 60%;
}
</style>
